import React from 'react';
import { Link as RouterLink } from 'react-router-dom';
import {
  AppBar,
  Toolbar,
  Typography,
  Button,
  Box,
  IconButton,
  Menu,
  MenuItem
} from '@mui/material';
import AccountCircle from '@mui/icons-material/AccountCircle';

const Navbar = ({ user, onLogout }) => {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleMenu = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <AppBar position="static">
      <Toolbar>
        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
          FinZkTrust
        </Typography>
        
        {user ? (
          <>
            <Box sx={{ display: 'flex', gap: 2 }}>
              <Button
                color="inherit"
                component={RouterLink}
                to="/credit-proof"
              >
                信用证明
              </Button>
              <Button
                color="inherit"
                component={RouterLink}
                to="/account"
              >
                个人账户
              </Button>
              <Button
                color="inherit"
                component={RouterLink}
                to="/borrow"
              >
                借款
              </Button>
              <Button
                color="inherit"
                component={RouterLink}
                to="/lend"
              >
                放贷
              </Button>
              <IconButton
                size="large"
                aria-label="account of current user"
                aria-controls="menu-appbar"
                aria-haspopup="true"
                onClick={handleMenu}
                color="inherit"
              >
                <AccountCircle />
              </IconButton>
              <Menu
                id="menu-appbar"
                anchorEl={anchorEl}
                anchorOrigin={{
                  vertical: 'top',
                  horizontal: 'right',
                }}
                keepMounted
                transformOrigin={{
                  vertical: 'top',
                  horizontal: 'right',
                }}
                open={Boolean(anchorEl)}
                onClose={handleClose}
              >
                <MenuItem
                  component={RouterLink}
                  to="/profile"
                  onClick={handleClose}
                >
                  个人资料
                </MenuItem>
                <MenuItem onClick={() => {
                  handleClose();
                  onLogout();
                }}>
                  退出登录
                </MenuItem>
              </Menu>
            </Box>
          </>
        ) : (
          <Button color="inherit" component={RouterLink} to="/">
            登录
          </Button>
        )}
      </Toolbar>
    </AppBar>
  );
};

export default Navbar; 